<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录账号</span>
      </div>
      <div class="text item"><el-input class="username" placeholder="请输入用户名" v-model="username" clearable> </el-input><el-input class="password" placeholder="请输入密码" v-model="password" show-password></el-input></div>
      <div class="login"><el-button type="primary" :disabled="buttonDisable" @click="login">登录</el-button></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      buttonDisable: false
    }
  },
  name: 'Login',
  methods: {
    async login() {
      this.buttonDisable = true
      const { data: type } = await this.$http.post('/login', { username: this.username, password: this.password })
      if (type) {
        localStorage.setItem('token', type + '/' + this.username)
        this.$router.push('/' + type)
        this.$message({
          type: 'info',
          message: '登录成功！欢迎进入选课系统！',
          duration: 1500
        })
      } else {
        localStorage.removeItem('token')
        this.$alert('用户名或密码错误', '啊哦，登录失败', {
          confirmButtonText: '确定'
        })
      }
      this.buttonDisable = false
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  .username {
    margin-bottom: 15px;
  }
  .username,
  .password {
    margin-top: 5px;
    margin-bottom: 15px;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -240px;
  margin-top: -220px;
  width: 480px;
  text-align: center;
}
</style>
